<template>
	<el-carousel :height="bannerHeight" autoplay indicator-position="none" arrow="never">
		<el-carousel-item >
			<img :src="loginIconTwo" class="bannerImg"/>
		</el-carousel-item>

		<div class="login_container">
			<div class="login-left-logo-text">
				<span>{{ getThemeConfig.globalTitle }}</span>
				<!-- <span class="login-left-logo-text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span> -->
			</div>
			<div class="login_box">
				<!--  logo区域-->
				<!-- <div class="avatar_box">
					<img :src="logoMini" alt="" />
				</div> -->

				<div class="login-warp-main-form">
					<Account />
				</div>
			</div>
		</div>

	</el-carousel>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted, computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';

import loginIconTwo from '/@/assets/images/LoginBackground1.jpg';

// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));
const bannerHeight = ref();

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);

/**
 * 获取布局配置信息
 */
const getThemeConfig = computed(() => {
	return themeConfig.value;
});

/**
 * 页面加载时
 */
onMounted(() => {
	NextLoading.done();
	setSize();
});

/**
 * 根据窗口大小设置banner高度
 */
const setSize = () => {
	bannerHeight.value = document.body.clientHeight + "px";
};

</script>

<style scoped lang="scss">
.login_container {
	height: 100%;
	background: var(--el-color-white);

	.login-left-logo-text {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 400px;

		span {
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 30px;
			font-weight: 700;
			color: '#545C64';
		}

		.login-left-logo-text-msg {
			margin:50px;
			font-size: 12px;
			color: var(--el-color-primary);
		}
	}

	.login_box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 450px;
		height: 400px;
		background-color: #ffffff88;
		border-radius: 3px;

		.avatar_box {
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 10px;
			width: 130px;
			height: 130px;
			border: 1px solid #eee;
			border-radius: 50%;
			box-shadow: 0 0 10px #ddd;
			background-color: #fff;

			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #eeeeee;
			}
		}

		.login-warp-main-form {
			flex: 1;
			padding: 0 50px 50px;
			padding-top: 50px;

			.login-content-main-scan {
				position: absolute;
				top: 100px;
				right: 0;
				width: 50px;
				height: 50px;
				overflow: hidden;
				cursor: pointer;
				transition: all ease 0.3s;
				color: var(--el-color-primary);

				&-delta {
					position: absolute;
					width: 35px;
					height: 70px;
					z-index: 2;
					top: 2px;
					right: 21px;
					background: var(--el-color-white);
					transform: rotate(-45deg);
				}

				&:hover {
					opacity: 1;
					transition: all ease 0.3s;
					color: var(--el-color-primary) !important;
				}

				i {
					width: 47px;
					height: 50px;
					display: inline-block;
					font-size: 48px;
					position: absolute;
					right: 1px;
					top: 0px;
				}
			}
		}

	}
}

.bannerImg {
	width: 100%;
	height: inherit;
	min-height: 360px;
	min-width: 1400px;
}
</style>
